NavStudio Component - Saved DHTML Menu



NavStudio Component
 
The component version of the software allows for the complete customization of the menu with a text editor of your choosing.

This document contains the component menu which may be used as a starting point to customize the menu for your own site.  You may also choose to start with one of the other sample menus from the 'saved_menus' folder.

This component and the menus produced by NavStudio's visual interface are identical and fully interchangeable.  You may create a menu with the visual interface, then manually make changes with a text editor, or vice versa.

*Note: The sample menu on this page is based on the Adobe home page menu, for a more generic starting point choose the simple menu in the 'saved_menus' folder.
 
 
How It Works?
 
There are two basic parts to the component which are responsible for adding the menu to a page. 

The first part is a set of tags in the source of the HTML document (view the source of this page to see them first hand, in this document they reside near the top of the source code, and are commented for easy identification.)

The second part consists of the supporting menu files.  The menu tags in this page are responsible for referencing these supporting files, which create the menu when the page loads in the browser.  A single set of supporting menu  files may be referenced by any number of HTML documents.  The menu is customized by making changes to the supporting menu data file, any updates will automatically be reflected in all documents containing the menu.
 
 
Getting Started
 
The menu in this page references a menu data file,  'start_here.js',  located in the code folder (the code folder is located in the same folder as this document).  To customize the menu, open the file with a text editor of your choosing (we recommend something simple like Note Pad).  *Note: Always save the data file as plain text, or the menu will fail to load.

Each menu setting is represented by a parameter name and value pair.  Parameters with new indexes may be added at will, creating an unlimited array of menu structures and styles.  The data file contains comments regarding the specific use of parameters to customize the menu.

After editing and saving the 'start_here.js' file, click the re-load button in the browser to see the menu at the top of this page update with your new settings.
 
 
Adding The Menu To My Documents
 
A single set of tags (described in the 'How It Works' section) are responsible for adding the menu to any web page.  The tags work similar to a <DIV>, or <TABLE> tag by drawing the menu at the point of insertion as a inline-block level element.  Nest the menu tags within <TABLE>, <P>, or <DIV> tags to position the menu, just as you would position an image or text within the document.

The tags reference the menu support files, if the references to the support files are not correct, or the support files do not exist, the menu will fail to load.  The tags contain three references which must correctly indicate the relative or absolute location of your menus supporting files folder (code folder).  The menu tags within this page include comments indicating where the folder references need to be specified.
 
 
Using With The Visual Interface
 
The menu within this document may be opened and edited using the visual interface by choosing 'File' - 'Open' from the main menu.  If you plan on customizing the menu with a text editor you may find it useful to use the visual interface to save and insert your menu only.  To do this, simply open your component menu with NavSudio.

**Note:  This component version is recommended for advanced users who are familiar with HTML syntax and HTML file references.
DHTML Menu / JavaScript Menu - Created Using NavStudio (OpenCube Inc.)